<template>
  <div>
    <div class="container">
      <!-- 页面 A -->
      <PageA v-model:title="listData.title" />

      <!-- 页面 B -->
      <PageB v-model:valueHtml="listData.content" />

      <!-- 提交按钮 -->
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import PageA from '@/components/chat/TalkInfo.vue';
import PageB from '@/components/chat/TalkCreate.vue';
import talkAPI from "@/api/module/talk";
import {el} from "element-plus/es/locale/index";

// 表单数据
const listData = ref({
  title: '',
  content: '',
});

// 提交逻辑
const handleSubmit = async () => {
  const formData = new FormData();
  formData.append('title', listData.value.title);
  formData.append('content', listData.value.content);
  const res = await talkAPI.add(formData);
  if(res.code === 200) {
    ElMessage.success('提交成功！');
  }else {
    ElMessage.error(res.msg);
  }
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.el-button {
  margin-top: 20px;
  width: 100%;
}
</style>


<!--<template>-->
<!--  <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm" label-width="80px">-->
<!--    <el-form-item label="内容" prop="content" v-if="ruleForm.radio1 === 1" class="label-befor">-->
<!--      <WangEditor class="WangEditor" @select="getRich" ref="childrenRef" :editValue="editValue" />-->
<!--    </el-form-item>-->
<!--  </el-form>-->
<!--</template>-->

<!--<script setup>-->
<!--import { onMounted, reactive, ref, watch, nextTick } from 'vue'-->

<!--import WangEditor from '@/components/chat/TalkCreate.vue'-->

<!--const props = defineProps({-->
<!--  // 父页面传递的数据-->
<!--  dataRow: {-->
<!--    type: Object,-->
<!--    default: () => {-->
<!--      return { "title": "", "languageType": 1, "contentType": 1, "content": "", "remark": null }-->
<!--    }-->
<!--  },-->
<!--})-->
<!--const ruleFormRef = ref()-->
<!--const ruleForm = reactive({-->
<!--  content: "",-->
<!--})-->
<!--const editValue = ref("")-->

<!--watch(props, (newUser, oldUser) => {-->
<!--  if (props.dataRow && props.dataRow.id) {-->
<!--    // 富文本回显-->
<!--    ruleForm.content = props.dataRow.content-->
<!--    editValue.value = ruleForm.content-->
<!--  }-->
<!--}, {-->
<!--  deep: true,-->
<!--  immediate: true-->
<!--});-->

<!--//当编辑器的内容更新时，获取该值-->
<!--const getRich = function (value) {-->
<!--  ruleForm.content = value-->
<!--}-->
<!--defineExpose({-->
<!--  ruleForm,-->
<!--})-->
<!--</script>-->

